<template>
  <div class="shops_header">
    <van-nav-bar
      title="订单详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
  </div>
  <div class="shops_wrapper" v-for="(item, index) in List" key="item">
    <div class="select-icon">
      <img
        :class="
          List[index].selectType === false ? 'Fselecticon' : 'Tselecticon'
        "
        @click="select(index)"
      />
    </div>
    <img :src="item.src" class="image" />
    <div class="detail">
      <div class="other">
        <div class="name">{{ item.name }}</div>
        <div class="icon" @click="deleteinfo(index)">
          <img src="@/images/delete.png" width="20" height="20" />
        </div>
      </div>
      <div class="info">{{ item.detail }}</div>
      <div class="count_wrap">
        <div class="count">x{{ item.count }}</div>
        <div class="price">￥{{ item.price }}</div>
      </div>
    </div>
    <div class="shops_box" style="height: 500px"></div>
  </div>
  <div class="selectplace_wrap" @click="selectplace">
       <div class="selectplace_text">请选择地址</div>
       <div class="selectplace_arrow"><van-icon name="arrow" /></div>
  </div>
 
  <div class="shops_footer">
    
    <div class="allselect" @click="allselect">
      <button
        :class="allselectType === false ? 'allbtn' : 'selectallbtn'"
      ></button
      >全选
    </div>

    <div class="submit_wrapper">
      <div class="totalprice">合计: ￥{{ countstore.totalprice }}</div>
      <van-button class="submit" round type="primary">提交订单</van-button>
    </div>
  </div>


</template>

<script>
import { countStore } from "@/store/count";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";

export default {
  setup() {
    const countstore = countStore();
    let List = countstore.shopingcar;
    const allselectType = ref(false);
    const router = useRouter();

    const onClickLeft = () => history.back();

    // 选中
    const select = (index) => {
      List[index].selectType = !List[index].selectType;
      let selectprice = [];
      for (let i = 0; i < List.length; i++) {
        if (List[i].selectType == true) {
          selectprice.push(List[i].price);
        }
      }
      // console.log(selectprice);
      if (!selectprice[0]) {
        countstore.totalprice = 0;
      } else {
        countstore.totalprice = selectprice.reduce(function (prev, next) {
          return prev + next;
        });
      }

      // console.log(List[index].price);
    };

    // 删除
    const deleteinfo = (index) => {
      List.splice(index, 1);
      let total = 0;
      if (List.length == 0) {
        countstore.totalprice = 0;
      } else {
        let deleteArr = []
        for (let l = 0; l < List.length; l++) {
          if(List[l].selectType === true) {
              deleteArr.push(List[l].price)
              console.log(deleteArr);
              countstore.totalprice = deleteArr.reduce(function (prev, next) {
          return prev + next;
        });
          } else {
            countstore.totalprice = 0
          }
          
        }
      }
      if(allselectType.value === true) {
        for (let i = 0; i < List.length; i++) {
        total += List[i].price;
        if (countstore.totalprice !== total) {
          countstore.totalprice = total;
        }
      }
      }
      
    };

    // 全选
    const allselect = () => {
      let totalpric = 0;
  
      allselectType.value = !allselectType.value;
      
     for (let k = 0; k < List.length; k++) {
       if(List[k].selectType == true) {
         List[k].selectType = false
       }
       List[k].selectType ===  !List[k].selectType
       select(k)
     }
    //  console.log(List);
      if (allselectType.value === true) {
        for (let i = 0; i < List.length; i++) {
          totalpric += List[i].price;
          // console.log(totalpric);
          if (countstore.totalprice !== totalpric) {
            countstore.totalprice = totalpric;
          }
        }
      } else {
        
        for (let l = 0; l < List.length; l++) {
         List[l].selectType = false
          
        }
        countstore.totalprice = 0;
      }
    };

    // 选择地点
    const selectplace = () => {
        router.push('/address')
    }

    return {
      countstore,
      allselectType,
      List,
      router,
      onClickLeft,
      deleteinfo,
      allselect,
      select,
      selectplace
    };
  },
};
</script>

<style scoped>
.shops_header {
  padding: 15px;
}
.box {
  height: 50px;
}
.select-icon {
  width: 35px;
  height: 35px;
  border: 1px solid #000;
  border-radius: 30px;
  margin-top: 80px;
  margin-left: 10px;
}
.shops_wrapper {
  width: 680px;
  height: 210px;
  margin: 30px;
  border: 1px solid #000;
  display: flex;
}
.image {
  width: 180px;
  height: 180px;
  margin: 10px;
}
.name {
  color: rgb(58, 58, 57);
  margin: 12px 0 0 10px;
  font-size: 18px;
}
.info {
  margin-left: 10px;
  font-size: 14px;
  opacity: 0.8;
}
.price {
  margin: 40px 0 0 260px;
  font-size: 16px;
}
.other {
  display: flex;
  justify-content: space-between;
}
.count_wrap {
  display: flex;
}
.count {
  letter-spacing: 4px;
}

.icon {
  margin-top: 5px;    
}
.allbtn {
  width: 30px;
  height: 30px;
  border: 1px solid #000;
  border-radius: 15px;
  margin: 0 10px;
}
.selectallbtn {
  width: 30px;
  height: 30px;
  border: 1px solid #000;
  border-radius: 15px;
  background: rgb(93, 165, 220);
  margin: 0 10px;
}
.selectplace_wrap {
  width: 730px;
   display: flex;
   justify-content: space-between;
  position: fixed;
  top: 87%;
  font-size: 15px;
  background: #fff;
}
.selectplace_text {
  margin:0 0 0 10px;
  padding-bottom: 10px;
}
.shops_footer {
  width: 750px;
  height: 130px;
  border-top: 0.7px solid #000;
  background: #fff;
  display: flex;
  position: fixed;
  top: 90%;
  z-index: 4;
  justify-content: space-between;
  align-items: center;
}
.submit_wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.totalprice {
  margin: 0 20px;
}
.submit {
  width: 180px;
  height: 80px;
}
.allselect {
  margin-left: 30px;
  letter-spacing: 6px;
}
.Fselecticon {
  width: 1px;
  height: 1px;
}
.Tselecticon {
  margin-left: 7px;
  margin-bottom: 2px;
  width: 15px;
  height: 15px;
  border-radius: 15px;
  border: 1px solid #000;
  background: rgb(27, 210, 54);
}
</style>